<template>
  <div>
    <!-- 商品列表展示 -->
    <van-checkbox-group v-model="checkedarr">
      <van-checkbox  v-for="item in cartList" :key="item.id" :name="item.product_id" @click="changecheck(item)" >  
    <van-swipe-cell>
     <van-card
    :num="item.number"
    :price="item.market_price"
    desc="描述信息"
    :title="item.goods_name"
    class="goods-card"
   :thumb="item.list_pic_url"/>
  <template #right>
  <van-button square text="删除" type="danger" class="delete-button" @click="delsingel(item.product_id)"/>
  </template>
</van-swipe-cell>
 </van-checkbox>
</van-checkbox-group>
   <!-- 底部提交订单 -->
   <van-submit-bar :price="checkedarr.length==0?0:Number(this.goodsAmount)" button-text="提交订单" @submit="onSubmit">
   <van-checkbox v-model="checkall" @click="quanxuan">全选</van-checkbox>
   <button class="del" @click="delcart">删除</button>
   <template #tip>
    你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
   </template>
  </van-submit-bar>

  <!-- 底部路由导航 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
 import {getcartdata,dellist,checklist} from '../api/cart.js'
 import tabbar from '../components/Tabbar.vue'
  export default {
    name:'',
    data () {
     return {
        checkedarr:[],//每个商品的选中状态的数组
        cartList:[],//购物车的数据
        goodsAmount:"",//商品合计
        checkall:"",//全选按钮的选中状态
        checkeddata:"" //全选传递的参数
      };
    },
   components:{
     tabbar
   },
   watch:{
    cartList(){
      //通过监听后端传来的数据，判断一开始的选中状态
      this.checkedarr=[]
      this.cartList.forEach(item=>{
        if(item.checked){
          this.checkedarr.push(item.product_id)
        }
      })
      //如果每个商品的选中状态的数组的长度等于总数据的长度就让全选按钮变为选中状态
      this.checkall=(this.checkedarr.length==this.cartList.length)
    }
   },
   created(){
    //  初始调用数据并渲染
     this.getcart()
   },
   methods:{
    //  提交订单
     onSubmit(){
       this.$toast({message: '暂无该功能', icon: 'like-o'})
     },
    //  跳转地址页面
     onClickEditAddress(){
       this.$router.push('/ModificationAddress')
     },
    //  获取购物车列表
    getcart(){
      getcartdata().then(res=>{
        this.cartList=res.data.cartList;
        this.goodsAmount=res.data.cartTotal.checkedGoodsAmount*100
      })
    },
    //删除选中的商品
     delcart(){
     let id=this.checkedarr.join(',')
     dellist({productIds:id}).then(res=>{
       if(res.errno==0){
        this.$toast({message: '删除成功'})
        this.getcart()
       }
     })
     },
    //  删除单个商品
     delsingel(id){
       dellist({productIds:id.toString()}).then(res=>{
       if(res.errno==0){
        this.$toast({message: '删除成功'})
        this.getcart()
       }
     })
     },
     //切换商品选中状态
     changecheck(val){
       checklist({isChecked:val.checked?'0':'1',productIds:val.product_id}).then(res=>{
         if(res.errno==0){
          this.getcart()
         this.goodsAmount=res.data.cartTotal.checkedGoodsAmount*100
         }
       })
     },
    //全选中的状态
    quanxuan(){
        // 获取全选的参数
        this.checkeddata = '';
        this.cartList.forEach(item=>{
        this.checkeddata+=item.product_id+","
        })
        checklist({isChecked:this.checkall?'1':'0',productIds:this.checkeddata}).then(res=>{
         if(res.errno==0){
           this.getcart()
         this.goodsAmount=res.data.cartTotal.checkedGoodsAmount*100
         }
    })
   }

  }
  }

</script>
<style scoped lang='less'>
 .van-submit-bar{
   position: fixed;
   bottom: 50px;
   left: 0;
 }
 .van-checkbox{
   margin-left: 10px;
 }
 .van-card{
  width: 340px;
 }
 .del{
   border: 1px solid blue;
   border-radius: 10px;
   background: red;
   color: white;
   text-align: center;
   width: 40px;
   height: 20px;
   margin-left: 1px;
 }
 .van-checkbox-group{
   height: 550px;
   overflow: auto;
 }
 .delete-button {
    height: 100%;
  }
</style>